<template>
  <div class="product-section">
    <section>
      <el-row :gutter="20">
        <el-col :span="5" v-for="item in productList" :key="item.skuId">
          <ProductCard :product="item" />
        </el-col>
      </el-row>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </section>
    <section v-show="productList.length == 0">
      <el-empty description="抱歉，没有找到该商品信息~" />
    </section>
  </div>
</template>
<script setup>
import { searchByKeyword } from "@/api/mall/client/product/index";
import ProductCard from "@/components-mall/ProductCard";
import { useRoute } from "vue-router";
const productList = ref([]);
const queryParams = ref({
  pageNum: 1,
  pageSize: 20,
  keyword: "",
});
const props = defineProps({
  keyword: {
    type: String,
  },
});
watch(
  () => props.keyword,
  (val) => {
    queryParams.value.keyword = val;
  }
);
const total = ref(0);
const search = async () => {
  queryParams.value.pageNum = 1;
  getList();
  // const res = await searchByKeyword(queryParams.value);
  // productList.value = res.list;
  // total.value = res.total;
};
const getList = async () => {
  const res = await searchByKeyword(queryParams.value);
  productList.value = res.list;
  total.value = res.total;
};
const route = useRoute();
queryParams.value.keyword = route.query.keyword;
if (route.query.keyword.trim() !== "" && queryParams.value.keyword !== undefined) {
  getList();
}

defineExpose({
  search,
  productList,
  total,
});
</script>

<style lang="scss" scoped>
:deep(.el-pagination) {
  --el-pagination-hover-color: #1aa684;
  --el-color-primary: #1aa684;
}
:deep(.el-select-dropdown__item.selected) {
  color: #1aa684 !important;
}
.product-section {
  margin-top: 10px;
}
.pagination-container {
  background: none;
}
</style>
